<template>
	<view class="root-container">
	  <scroll-view scroll-y class="scroll-container">
	    <view class="content-container">
	      <view class="title">姓名</view>
	      <view class="car-number-container">
	        <!-- <image src="https://xjl.static.nicewifi.cn/uniapp/parking/car.png" mode="aspectFill" class="mobile" /> -->
	        <input v-model="form.name" placeholder="请输入姓名" />
	      </view>
	      <view class="title">手机号</view>
	      <view class="car-number-container">
	        <input v-model="form.mobile" type="number" placeholder="请输入手机号" />
	      </view>
	      <view class="submit-box zaozao-flex-center">
	        <view class="submit-btn zaozao-flex-center" @click="submit()">
	          <text>提交</text>
	        </view>
	      </view>
	      
	    </view>
	  </scroll-view>
	</view>
</template>

<script>
	import {objectValueAllEmpty,checkPhoneNumber,checkIdCard} from "@/utils/functions.js"
	import {addVisitor} from "@/api/user.js";
	export default {
		data() {
			return {
				form:{
					name:"",
					mobile:"",
				},
			}
		},
		mounted() {
			
		},
		watch:{
			
		},
		onLoad(options){
			
		},
		onShow(){
			
		},
		methods: {
			submit(){
				if(objectValueAllEmpty(this.form)){
					uni.showToast({
						title:"请将信息填写完整",
						icon:"none"
					})
					return
				}
				if(!checkPhoneNumber(this.form.mobile)){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:"none"
					})
					return
				}
				uni.showLoading({
					title: '提交中'
				});
				addVisitor(this.form).then((res)=>{
					if(res.data.code==0){
						uni.hideLoading()
						uni.showToast({
							title:res.data.data,
							duration:2000,
							icon:"success"
						});
						uni.navigateBack();
					}else{
						uni.showToast({
							title:res.data.msg,
							duration:2000,
						});
					}
				})
			},
		}	
	}
</script>

<style scoped lang="less">
	.submit-box{
	  width:750rpx;
	  .submit-btn{
	    width: 620rpx;
	    height: 94rpx;
	    background: #4AB5FF;
	    border-radius: 20rpx;
	    margin-top:34rpx;
	    font-size: 28rpx;
	    color:white;
	  }
	}
	.root-container {
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  align-items: stretch;
	  overflow: hidden;
	  position: relative;
	  background: #F7F7F7;
	
	  .bg {
	    width: 100vw;
	    position: absolute;
	    top: 0;
	    left: 0;
	  }
	
	  .scroll-container {
	    flex: 1;
	    overflow: hidden;
	
	    .content-container {
	      display: flex;
	      flex-direction: column;
	      justify-content: flex-start;
	      align-items: stretch;
	      overflow: hidden;
	    }
	  }
	}
	
	.title {
	  margin: 30rpx 24rpx;
	  font-weight: 500;
	  font-size: 32rpx;
	  color: #000000;
	  line-height: 48rpx;
	
	  &::before {
	    content: '*';
	    color: #FF0000;
	  }
	}
	
	.car-number-container {
	  width: 640rpx;
	  margin: 0 24rpx;
	  padding: 30rpx 24rpx 30rpx 38rpx;
	  background-color: #fff;
	  border-radius: 16rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  gap: 10rpx;
	
	  .mobile {
	    width: 40rpx;
	    height: 96rpx;
	    flex-shrink: 0;
	  }
	
	  .car-number-input {
	    flex: 1;
	  }
	}
	
</style>